<template>
  <div class="about">
     <my-header :roles="roles" @cut="filt"></my-header>
     <div class="content">
        <my-menu :childrenMenu="menu"></my-menu>
        <div class="right"></div>
     </div>
  </div>
</template>
<script>
import MyHeader from '../components/myHeader';
import MyMenu from '../components/myMenu';
import axios from 'axios';
import { ref } from 'vue';
export default {
  components:{MyHeader,MyMenu},
  setup(props) {
    const menu = ref([]);
    const roles = ref([]);
    const allMenu = ref([]); // 总的menu数据
    axios.get('menu.json').then(res => {
      menu.value = res.data;
      allMenu.value = JSON.parse(JSON.stringify(res.data));
    })
    axios.get('roles.json').then(res => {
      roles.value = res.data;
    })
    const filt = (val) => { // 子传父的事件
       menu.value[0].children = allMenu.value[0].children.filter(item => item.type.includes(val));
    }
    return {
      menu,
      roles,
      filt
    }
  }
}


// let obj = { name: '张三' };
// let obj1 = JSON.parse(JSON.stringify(obj));
// obj1.name = '李四';
// console.log(obj);
</script>

<style lang="scss" scoped>
.about{
  height: 100%;
  .content{
    display: flex;
    height: calc(100% - 60px);
    .right{
      flex: 1;
    }
  }
}
</style>

